<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1 v-show="isChecked">123123123</h1>
        <input type="checkbox" v-model="isChecked">
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="唱歌" v-model="hobbies">唱歌
        <input type="checkbox" value="跳舞" v-model="hobbies">跳舞
        <hr>
        <input type="radio" v-model="gender" id="male" value="男">
        <label for="male">男</label>
        <input type="radio" v-model="gender" id="female" value="女">
        <label for="female">女</label>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        let obj = {
            length: 10
        }

        console.log(Array.from(obj));

        let s = Array.from(obj).map((r, i) => ({
            id: +new Date + '' + i,
            val: r
        }))

        console.log(s);

        new Vue({
            el: "#app",
            data() {
                return {
                    isChecked: false,
                    hobbies: [],
                    gender: ''
                }
            },
        })
    </script>
</body>

</html>